<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form :model="pageData" layout="inline" size="small">
            <a-form-item label="商品编号" v-if="permissionStore.hasPermisson('spzllb.cx')">
              <a-input class="bacClass" v-model="pageData.commodityCode" @press-enter="huiche" allow-clear
                       style="width: 200px"></a-input>
            </a-form-item>

            <a-form-item label="商品名称" v-if="permissionStore.hasPermisson('spzllb.cx')">
              <a-input class="bacClass" v-model="pageData.commodityName" @press-enter="huiche" allow-clear
                       style="width: 200px"></a-input>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <Toolbar :items="pageData.btnList" @add="addHandler" @del="deleteHandler" @select="selectHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>

    <template #pageTabel>
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
        <div style="width: 100%; height: 100%">
          <encapsulation-agrid ref="table1Ref" :configaggrid="configTable1"></encapsulation-agrid>
        </div>
      </a-spin>
    </template>
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 999 }"
              :mask-closable="false"
              :width="400" unmount-on-close popup-container=".arco-tabs-content" height="100%"
              :visible="pageData.showAdd"
              :ok-loading="pageData.pageLoading" placement="bottom" @ok="sideOk" @cancel="pageData.showAdd = false">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div style="width: 100%;height:100%;" ref="drawerContentRef">
        <div style="padding: 0px; box-sizing: border-box; min-width: 1650px;height:33%;overflow: auto" class="scrollbar"
             ref="drawerHeaderRef">
          <el-scrollbar>
            <a-tabs   :lazy-load="true" default-active-key="1">
              <a-tab-pane key="1" title="基本信息">
                <div>
                  <a-form ref="formRef" :model="dataForm" size="small" layout="horizontal"
                          :label-col-props="{ span: 10 }" :wrapper-col-props="{ span: 14 }">
                    <a-space size="large">
                      <div>
                        <a-space>
                          <a-form-item label="商品编号" :validate-trigger="['change', 'blur']">
                            <a-input class="bacClass" placeholder=""
                                     v-model="dataForm.commodityCode" :style="{ width: '300px' }"/>
                          </a-form-item>
                          <a-form-item label="商品名称" :validate-trigger="['change', 'blur']">
                            <a-input class="bacClass" placeholder=""
                                     v-model="dataForm.commodityName" :style="{ width: '300px' }"/>
                          </a-form-item>
                          <a-form-item label="英文名称" field="nameEn">
                            <a-input class="bacClass" v-model="dataForm.nameEn"
                                     :style="{ width: '300px' }"/>
                          </a-form-item>
                          <a-form-item label="来源开发">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ" :filter-option="false" allow-search
                                      @focus="focusSelQ" :style="{ width: '300px' }"
                                      v-model="dataForm.sourceDevelopment">
                              <a-option v-for="item in pageData.nameList"
                                        :value="item['brandName']">{{ item['brandName'] }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="产品类型">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ1" :filter-option="false" allow-search
                                      @focus="focusSelQ1" :style="{ width: '300px' }"
                                      v-model="dataForm.productType">
                              <a-option v-for="item in pageData.nameList1"
                                        :value="item['productTypeName']">{{
                                  item['productTypeName']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                        </a-space>
                        <a-space>
                          <a-form-item label="布料名称">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ2" :filter-option="false" allow-search
                                      @focus="focusSelQ2" :style="{ width: '300px' }"
                                      v-model="dataForm.merceryName" @change="changeQ2">
                              <a-option v-for="item in pageData.nameList2" :value="item['id']">{{
                                  item['grayFabricName']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="成分" field="chinaPart">
                            <a-input v-model="dataForm.chinaPart" :style="{ width: '300px' }"
                                     disabled/>
                          </a-form-item>
                          <a-form-item label="英文成分">
                            <a-input v-model="dataForm.enPart" :style="{ width: '300px' }"
                                     size="small" disabled/>
                          </a-form-item>
                          <a-form-item label="成分备注" field="partRemark">
                            <a-input class="bacClass" v-model="dataForm.partRemark"
                                     :style="{ width: '300px' }"/>
                          </a-form-item>
                          <a-form-item label="面料类型">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ3" :filter-option="false" allow-search
                                      @focus="focusSelQ3" :style="{ width: '300px' }"
                                      v-model="dataForm.fabricType">
                              <a-option v-for="item in pageData.nameList3"
                                        :value="item['fabricCategory']">{{
                                  item['fabricCategory']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                        </a-space>
                        <a-space>
                          <a-form-item label="布类">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ4" :filter-option="false" allow-search
                                      @focus="focusSelQ4" :style="{ width: '300px' }"
                                      v-model="dataForm.clothType">
                              <a-option v-for="item in pageData.nameList4"
                                        :value="item['fabrics']">{{
                                  item['fabrics']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="染色类型">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ5" :filter-option="false" allow-search
                                      @focus="focusSelQ5" :style="{ width: '300px' }"
                                      v-model="dataForm.colorType">
                              <a-option v-for="item in pageData.nameList5"
                                        :value="item['jobType']">{{
                                  item['jobType']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="组织">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ6" :filter-option="false" allow-search
                                      @focus="focusSelQ6" :style="{ width: '300px' }"
                                      v-model="dataForm.organization">
                              <a-option v-for="item in pageData.nameList6"
                                        :value="item['greyInformationName']">{{
                                  item['greyInformationName']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="质量标准">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ7" :filter-option="false" allow-search
                                      @focus="focusSelQ7" :style="{ width: '300px' }"
                                      v-model="dataForm.qualityStandard">
                              <a-option v-for="item in pageData.nameList7"
                                        :value="item['verifyStandard']">{{
                                  item['verifyStandard']
                                }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="销售类型">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ8" :filter-option="false" allow-search
                                      @focus="focusSelQ8" :style="{ width: '300px' }"
                                      v-model="dataForm.saleType">
                              <a-option v-for="item in pageData.nameList8"
                                        :value="item['detailName']">{{ item['detailName'] }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                        </a-space>

                        <a-space>
                          <a-form-item label="产品日期">
                            <a-date-picker popup-container="html" class="bacClass" v-model="dataForm.productDate"
                                           :style="{ width: '300px' }"/>
                          </a-form-item>
                          <a-form-item label="生产工艺" field="productCraft">
                            <a-input class="bacClass" v-model="dataForm.productCraft"
                                     :style="{ width: '300px' }"/>
                          </a-form-item>
                          <a-form-item label="状态说明">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ9" :filter-option="false" allow-search
                                      @focus="focusSelQ9" :style="{ width: '300px' }"
                                      v-model="dataForm.stateDescription">
                              <a-option v-for="item in pageData.nameList9"
                                        :value="item['detailName']">{{ item['detailName'] }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="出厂单位">
                            <a-cascader :style="{ width: '300px' }" v-model="dataForm.exFactory"
                                        :options="pageData.nameList10" allow-clear ref="casOb"
                                        @change="cascaderChange($event, dataForm.exFactory)"
                                        class="bacClass" :title="pageData.title"
                                        :loading="pageData.loading" popup-container="html"/>
                          </a-form-item>
                          <a-form-item label="货主单位">
                            <a-cascader :style="{ width: '300px' }" v-model="dataForm.customFactory"
                                        :options="pageData.nameList11" allow-clear ref="casOb2"
                                        @change="cascaderChange2($event, dataForm.customFactory)"
                                        class="bacClass" :title="pageData.title2"
                                        :loading="pageData.loading2" popup-container="html"/>
                          </a-form-item>
                        </a-space>
                        <a-space>
                          <a-form-item label="包装纸筒" label-col-flex="70px">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ12" :filter-option="false" allow-search
                                      @focus="focusSelQ12" style="width: 167px"
                                      v-model="dataForm.packCarton">
                              <a-option v-for="item in pageData.nameList12"
                                        :value="item['codeType']">{{ item['codeType'] }}
                              </a-option>
                            </a-select>
                            <a-input class="bacClass" style="margin-left: 1px; width: 50px"/>
                          </a-form-item>
                          <a-form-item label="包装胶带" label-col-flex="70px">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ13" :filter-option="false" allow-search
                                      @focus="focusSelQ13" style="width: 167px"
                                      v-model="dataForm.packTape">
                              <a-option v-for="item in pageData.nameList13"
                                        :value="item['codeType']">{{ item['codeType'] }}
                              </a-option>
                            </a-select>
                            <a-input class="bacClass" style="margin-left: 1px; width: 50px"/>
                          </a-form-item>
                          <a-form-item label="耗损类型" label-col-flex="109px">
                            <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                                      @search="handleSearchQ14" :filter-option="false" allow-search
                                      @focus="focusSelQ14" :style="{ width: '218px' }"
                                      v-model="dataForm.lossType" @change="changeQ14">
                              <a-option v-for="item in pageData.nameList14"
                                        :value="item['materialsAttritionCategory']">
                                {{ item['materialsAttritionCategory'] }}
                              </a-option>
                            </a-select>
                          </a-form-item>
                          <a-form-item label="耗损率" label-col-flex="109px">
                            <a-input v-model="dataForm.lossRate" :style="{ width: '232px' }"
                                     size="small" disabled/>
                          </a-form-item>
                          <a-form-item>
                          </a-form-item>
                        </a-space>

                        <div></div>
                      </div>
                      <div style="width: 200px" v-if="!pageData.isShow2">
                        <a-upload list-type="picture-card" action="/" image-preview :limit="1"
                                  :customRequest="customUpload1"/>
                      </div>
                      <div>
                        <a-form-item label-col-flex="110px" field="picture" v-if="!pageData.isShow">
                          <a-image list-type="picture-card" style="width: 100px; height: 100px"
                                   :src="picUrl" @click="picClick"/>
                          <p style="color: red">*请点击修改图片</p>
                        </a-form-item>
                      </div>
                    </a-space>
                  </a-form>
                </div>
                <div class="my-tool-bar"></div>
              </a-tab-pane>
            </a-tabs>
          </el-scrollbar>
        </div>
        <div :style="{height:drawerTableHeight+'px'}">
          <a-tabs   :lazy-load="true" :justify="true" @change="changeTabs1">
            <a-tab-pane title="规格" :key="1">
              <div style="width: 100%; height: 100%">
                <encapsulation-agrid ref="table2Ref" :configaggrid="configTable2"
                                     @update:listData="getTable2Data"></encapsulation-agrid>
              </div>
            </a-tab-pane>
            <a-tab-pane title="要求" :key="2">
              <div style="width: 100%; height: 100%">
                <encapsulation-agrid ref="table3Ref" :configaggrid="configTable3"
                                     @update:listData="getTable3Data"></encapsulation-agrid>
              </div>
            </a-tab-pane>
            <a-tab-pane title="质量标准" :key="3">
              <div style="width: 100%; height: 100%">
                <encapsulation-agrid ref="table4Ref" :configaggrid="configTable4"
                                     @update:listData="getTable4Data"></encapsulation-agrid>
              </div>
            </a-tab-pane>
            <a-tab-pane title="附属" :key="4">
              <div style="display: flex; flex-direction: column; justify-content: space-around">
                <div>
                  <el-checkbox v-model="dataFormFushu.pushClothType" :true-label="1"
                               :false-label="0">主推布种
                  </el-checkbox>
                  <el-checkbox v-model="dataFormFushu.byThePool" :true-label="1"
                               :false-label="0">珠地边
                  </el-checkbox>
                  <el-checkbox v-model="dataFormFushu.cylinder" :true-label="1"
                               :false-label="0">圆筒
                  </el-checkbox>
                </div>
                <div>
                  <a-form-item label="坯布编号">
                    <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                              @search="handleSearch" :filter-option="false" allow-search
                              @focus="focusSel" :style="{ width: '300px' }"
                              v-model="dataFormFushu.greyCode">
                      <a-option v-for="item in pageData.clothList"
                                :value="item['greyCode']">{{ item['greyCode'] }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="风险提示">
                    <a-input class="bacClass" :style="{ width: '300px' }"
                             v-model="dataFormFushu.riskAlert"></a-input>
                  </a-form-item>
                  <a-form-item label="适用季节">
                    <a-select popup-container="html" class="bacClass" :loading="loading" :allowClear="true"
                              @search="handleSearch1" :filter-option="false" allow-search
                              @focus="focusSel1" :style="{ width: '300px' }"
                              v-model="dataFormFushu.applicableQuarter">
                      <a-option v-for="item in pageData.clothList1"
                                :value="item['detailName']">{{ item['detailName'] }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane title="关联坯布" :key="5">
              <div style="width: 100%; height: 100%">
                <encapsulation-agrid ref="table5Ref" :configaggrid="configTable5"
                                     @update:listData="getTable5Data"></encapsulation-agrid>
              </div>
            </a-tab-pane>
            <a-tab-pane title="关联成品" :key="6">
              <div style="width: 100%; height: 100%">
                <encapsulation-agrid ref="table6Ref" :configaggrid="configTable6"
                                     @update:listData="getTable6Data"></encapsulation-agrid>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
import {post} from '@/api/http'
import {usePagination, useRowKey, useRowSelection, useTable, useTableColumn} from '@/hooks/table'
import emitter from '@/hooks/useEventBus'
import {nextTick, onMounted, reactive, ref, watch} from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import {Message, Modal} from '@arco-design/web-vue'
import {FormInstance} from '@arco-design/web-vue/es/form'
import usePermission from '@/store/modules/permission'

import {localeText} from '@/api/aggridZw'
import {pagingList} from '@/api/paging'
import {baseURL} from '../../../api/axios.config'
import axios from 'axios'
import {slicing} from '@/utils/caseFrimAndSecRig'
import buttionRender from "@/components/aggridCellRenDerer/buttionRender.vue";

interface Firm {
  name: string
  id: number
}

interface ProductDataList {
  id: any
  saleState: any
  purchaseState: any
  commodityState: any
  commodityCode: any
  commodityName: any
  nameEn: any
  classType: any
  brandName: any
  merceryName: any
  chinaPart: any
  enPart: any
  remarkPart: any
  fabricType: any
  colorType: any
  productCraft: any
  qualityStandard: any
  merceryType: any
  organization: any
  saleType: any
  productType: any
  unitNo: any
  accuracy: any
  priceAccuracy: any
  batchNo: any
  quality: any
  assertState: any
  remark: any
  obsoleteState: any
  deleteState: any
  createName: any
  createTime: any
  updateName: any
  updateTime: any
  sourceDevelopment: any
  partRemark: any
  productDate: any
  stateDescription: any
  customFactory: any
  packCarton: any
  packTape: any
  lossType: any
  lossRate: any
  clothType: any
  picture: string
  exFactory: any
}

export default {
  name: 'ProductDataList',
  setup() {
    const drawerTableHeight: any = ref()
    const drawerContentRef: any = ref(null)
    const drawerHeaderRef: any = ref(null)
    const pageData = reactive<{
      gcList: Firm[]
      showAdd: boolean
      sideTitle: string
      rHeight: number | undefined
      rHeight1: any
      btnList: any[]
      isEdit: boolean
      pageLoading: boolean
      ProductUnitDrop: []
      cfList: any[]
      cfList2: any[]
      cfList3: any[]
      cfList5: any[]
      cfList6: any[]
      dutymachineState: number | undefined
      clothList: []
      clothList1: []
      clothList5: []
      clothList5_1: []
      clothList6_1: []
      clothList6: []
      nameList: []
      nameList1: []
      nameList2: []
      nameList3: []
      nameList4: []
      nameList5: []
      nameList6: []
      nameList7: []
      nameList8: []
      nameList9: []
      nameList10: []
      nameList11: []
      nameList12: []
      nameList13: []
      nameList14: []
      nameList15: []
      title: any
      title2: any
      loading: boolean
      loading2: boolean
      isShow: boolean
      isShow2: boolean
      file: string
      commodityCode: any
      commodityName: any
    }>({
      commodityName: '',
      commodityCode: '',
      file: '',
      isShow: false,
      isShow2: false,
      title: '',
      title2: '',
      loading: false,
      loading2: false,
      gcList: [],
      showAdd: false,
      sideTitle: '新增商品资料',
      rHeight: 0,
      rHeight1: 0,
      btnList: [],
      isEdit: false,
      pageLoading: false,
      ProductUnitDrop: [],
      cfList: [],
      cfList2: [],
      cfList3: [],
      cfList5: [],
      cfList6: [],
      dutymachineState: 0,
      clothList: [],
      clothList1: [],
      clothList5: [],
      clothList5_1: [],
      clothList6_1: [],
      clothList6: [],
      nameList: [],
      nameList1: [],
      nameList2: [],
      nameList3: [],
      nameList4: [],
      nameList5: [],
      nameList6: [],
      nameList7: [],
      nameList8: [],
      nameList9: [],
      nameList10: [],
      nameList11: [],
      nameList12: [],
      nameList13: [],
      nameList14: [],
      nameList15: [],
    })
    //设置权限
    // ['查询', '新增', '删除', '导出', '导入']
    const permissionStore = usePermission()

    if (permissionStore.hasPermisson('spzllb.cx')) {
      pageData.btnList.push('查询')
    }
    if (permissionStore.hasPermisson('spzllb.xz')) {
      pageData.btnList.push('新增')
    }
    if (permissionStore.hasPermisson('spzllb.sc')) {
      pageData.btnList.push('删除')
    }
    if (permissionStore.hasPermisson('spzllb.xg')) {
      pageData.isEdit = true
    }
    const table1Ref = ref<any>(null)
    const tableColumns = [
      {
        headerCheckboxSelection: true,
        checkboxSelection: true,
        width: 60,
        showDisabledCheckboxes: false,
        pinned: 'left',
      },
      {
        headerName: '商品编号',
        field: 'commodityCode',
        width: 150,
      },
      {
        headerName: '商品名称',
        field: 'commodityName',
        width: 150,
      },
      {
        headerName: '产品分类',
        field: 'productType',
        width: 150,
      },
      {
        headerName: '创建人',
        field: 'createName',
        width: 150,
      },
      {
        headerName: '创建时间',
        field: 'createTime',
        width: 200,
      },
      {
        headerName: '最后修改人',
        field: 'updateName',
        width: 150,
      },
      {
        headerName: '最后修改时间',
        field: 'updateTime',
        width: 200,
      },
      {
        headerName: '编辑',
        field: 'edit',
        slotName: 'edit',
        resizable: false,
        filter: false,
        sortable: false,
        width: 90,
        fixed: 'right',
        cellRenderer: buttionRender,
        cellRendererParams: {
          buttonList: [
            {
              type: 'primary',
              text: '修改',
              typeName: 'el-button',
              show: pageData.isEdit,
              Callback: (data: any) => {
                editHandler(data)
              },
            },
          ],
          eltagSize: 0,
        },
      },
    ]
    let configTable1 = {
      url: 'product/Commodity/getPage', //接口路径
      queryData: {
        //接口参数
        deleteState: '0',
        commodityCode: pageData.commodityCode,
        commodityName: pageData.commodityName,
      },
      paginationShow: true, //分页是否显示
      invokeiIterface: true, //是否调用接
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns,
      fileName: 'ProductDataList-1'
    }
    const table2Ref = ref<any>(null)
    const tableColumns2 = [
      {
        headerName: '操作',
        field: 'del',
        slotName: 'del',
        width: 150,
        cellRenderer: {
          template: `
            <icon-delete v-if="record.firstWashSealDegree != ''" style="font-size:30px; cursor: pointer; color: red"
                         @click="callDelRow(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callDelRow = (a: any) => {
              delRow(a)
            }
            return {
              record,
              callDelRow
            }
          }
        }
      },
      {
        headerName: '现货规格',
        field: 'spotGoodsSpec',
        slotName: 'spotGoodsSpec',
        width: 150,
        cellRenderer: {
          template: `
            <el-checkbox v-model="record.spotGoodsSpec" :true-label="1" :false-label="0"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record
            }
          }
        }
      },

      {
        headerName: '洗前封度',
        field: 'firstWashSealDegree',
        slotName: 'firstWashSealDegree',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.firstWashSealDegree" @change="callChangeCf(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callChangeCf = (a: any) => {
              changeCf(a)
            }
            return {
              record,
              callChangeCf
            }
          }
        }
      },
      {
        headerName: '洗前封度单位',
        field: 'firstWashSealDegreeUnit',
        slotName: 'firstWashSealDegreeUnit',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.firstWashSealDegreeUnit"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗前克重',
        field: 'firstWashWeight',
        slotName: 'firstWashWeight',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.firstWashWeight"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗前克重单位',
        field: 'firstWashWeightUnit',
        slotName: 'firstWashWeightUnit',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.firstWashWeightUnit"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗前米数',
        field: 'firstWashWeter',
        slotName: 'firstWashWeter',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.firstWashWeter"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗前码数',
        field: 'firstWashYardage',
        slotName: 'firstWashYardage',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.firstWashYardage"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗后封度',
        field: 'afterWashSealDegree',
        slotName: 'afterWashSealDegree',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.afterWashSealDegree"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗后封度单位',
        field: 'afterWashSealDegreeUnit',
        slotName: 'afterWashSealDegreeUnit',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.afterWashSealDegreeUnit"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗后克重',
        field: 'afterWashWeight',
        slotName: 'afterWashWeight',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.afterWashWeight"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗后克重单位',
        field: 'afterWashWeightUnit',
        slotName: 'afterWashWeightUnit',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.afterWashWeightUnit"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '洗后码数',
        field: 'afterWashYardage',
        slotName: 'afterWashYardage',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.afterWashYardage"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '对外克重',
        field: 'foreignWeight',
        slotName: 'foreignWeight',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.foreignWeight"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '对外幅度',
        field: 'foreignRange',
        slotName: 'foreignRange',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.foreignRange"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '横缩',
        field: 'absciss',
        slotName: 'absciss',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.absciss"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '直缩',
        field: 'straight',
        slotName: 'straight',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.straight"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '扭度',
        field: 'torsion',
        slotName: 'torsion',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.torsion"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '规格',
        field: 'spec',
        slotName: 'spec',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.spec"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
    ]
    let configTable2 = {
      url: 'product/CommoditySpec/getList', //接口路径
      queryData: {
        //接口参数
      },
      paginationShow: false, //分页是否显示
      invokeiIterface: false, //是否调用接
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns2,
      fileName: 'ProductDataList-2'
    }
    const getTable2Data = (data: any) => {
      pageData.cfList = data
      console.log('pageData.cfList', pageData.cfList)
      if (pageData.cfList['spotGoodsSpec'] == 1) {
        pageData.cfList['spotGoodsSpec'] = true
      } else {
        pageData.cfList['spotGoodsSpec'] = false
      }
    }
    const table3Ref = ref<any>(null)
    const tableColumns3 = [
      {
        headerName: '操作',
        field: 'del2',
        slotName: 'del2',
        width: 150,
        cellRenderer: {
          template: `
            <icon-delete v-if="record.projectName != ''"
                         style="font-size: 30px; cursor: pointer; color: red"
                         @click="callDelRow2(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callDelRow2 = (a: any) => {
              delRow2(a)
            }
            return {
              record,
              callDelRow2
            }
          }
        }
      },
      {
        headerName: '项目',
        field: 'projectName',
        slotName: 'projectName',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.projectName"
                     @change="callChangeCf2(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callChangeCf2 = (a: any) => {
              changeCf2(a)
            }
            return {
              record,
              callChangeCf2
            }
          }
        }
      },
      {
        headerName: '要求',
        field: 'requestName',
        slotName: 'requestName',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.requestName"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record
            }
          }
        }
      },
      {
        headerName: '备注',
        field: 'remark',
        slotName: 'remark',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.remark"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record
            }
          }
        }
      },
    ]
    let configTable3 = {
      url: 'product/CommodityRequest/getList', //接口路径
      queryData: {
        //接口参数
      },
      paginationShow: false, //分页是否显示
      invokeiIterface: false, //是否调用接
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns3,
      fileName: 'ProductDataList-3'
    }
    const getTable3Data = (data: any) => {
      pageData.cfList2 = data
    }
    const table4Ref = ref<any>(null)
    const tableColumns4 = [
      {
        headerName: '操作',
        field: 'del3',
        slotName: 'del3',
        width: 150,
        cellRenderer: {
          template: `
            <icon-delete v-if="record.projectName != ''" style="font-size: 30px; cursor: pointer; color: red"
                         @click="callDelRow3(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callDelRow3 = (a: any) => {
              delRow3(a)
            }
            return {
              record,
              callDelRow3
            }
          }
        }
      },
      {
        headerName: '项目名称',
        field: 'projectName',
        slotName: 'projectName',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.projectName" @change="callChangeCf3(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callChangeCf3 = (a: any) => {
              changeCf3(a)
            }
            return {
              record,
              callChangeCf3
            }
          }
        }
      },
      {
        headerName: '要求值',
        field: 'requestName',
        slotName: 'requestName',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.requestName"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '备注',
        field: 'remark',
        slotName: 'remark',
        width: 150,
        cellRenderer: {
          template: `
            <a-input class="bacClass" v-model="record.remark"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
    ]
    let configTable4 = {
      url: 'product/CommodityQualityStandard/getList', //接口路径
      queryData: {
        //接口参数
      },
      paginationShow: false, //分页是否显示
      invokeiIterface: false, //是否调用接
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns4,
      fileName: 'ProductDataList-4'
    }
    const getTable4Data = (data: any) => {
      pageData.cfList3 = data
    }
    const table5Ref = ref<any>(null)
    const tableColumns5 = [
      {
        headerName: '操作',
        field: 'del5',
        slotName: 'del5',
        width: 150,
        cellRenderer: {
          template: `
            <icon-delete v-if="record.greyCode != ''"
                         style="font-size: 30px; cursor: pointer; color: red"
                         @click="callDelRow5(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callDelRow5 = (a: any) => {
              delRow5(a)
            }
            return {
              record,
              callDelRow5
            }
          }
        }
      },
      {
        headerName: '启用',
        field: 'startState',
        slotName: 'startState',
        width: 150,
        cellRenderer: {
          template: `
            <el-checkbox v-model="record.startState" :true-label="1"
                         :false-label="0" @change="callClickGuanlian(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callClickGuanlian = (a: any) => {
              clickGuanlian(a)
            }
            return {
              record,
              callClickGuanlian
            }
          }
        }
      },
      {
        headerName: '坯布编号',
        field: 'greyCode',
        slotName: 'greyCode',
        width: 150,
        cellRenderer: {
          template: `
            <a-select popup-container="html" class="bacClass" v-model="record.greyCode"
                      @change="callChangeCf5(record)" @focus="onFocusSel5"
                      @search="onHandleSearch5" :loading="loading" :filter-option="false"
                      allow-search allow-clear>
              <a-option v-for="item in pageData.clothList5"
                        :value="item['greyCode']">{{ item['greyCode'] }}
              </a-option>
            </a-select>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callChangeCf5 = (a: any) => {
              changeCf5(a)
            }
            const onFocusSel5 = () => {
              focusSel5()
            }
            const onHandleSearch5 = (val: any) => {
              handleSearch5(val)
            }
            return {
              record,
              pageData,
              callChangeCf5,
              onFocusSel5,
              onHandleSearch5,
            }
          }
        }
      },
      {
        headerName: '用坯属性(颜色)',
        field: 'greyAttribute',
        slotName: 'greyAttribute',
        width: 150,
        cellRenderer: {
          template: `
            <a-input v-model="record.greyAttribute" disabled/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record,
            }
          }
        }
      },
      {
        headerName: '坯布名称',
        field: 'greyName',
        slotName: 'greyName',
        width: 150,
        cellRenderer: {
          template: `
            <a-select popup-container="html" class="bacClass" v-model="record.greyName"
                      @focus="onFocusSel5_1" @search="onHandleSearch5_1" :loading="loading"
                      :filter-option="false" allow-search allow-clear>
              <a-option v-for="item in pageData.clothList5_1"
                        :value="item['grayFabricName']">{{
                  item['grayFabricName']
                }}
              </a-option>
            </a-select>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const onFocusSel5_1 = () => {
              focusSel5_1()
            }
            const onHandleSearch5_1 = (val: any) => {
              handleSearch5_1(val)
            }
            return {
              record,
              onFocusSel5_1,
              onHandleSearch5_1,
              pageData
            }
          }
        }
      },
      {
        headerName: '销售色号',
        field: 'saleColorNo',
        slotName: 'saleColorNo',
        width: 150,
        cellRenderer: {
          template: `
            <a-input v-model="record.saleColorNo"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record
            }
          }
        }
      },
    ]
    let configTable5 = {
      url: 'product/CommodityGrey/getList', //接口路径
      queryData: {
        //接口参数
      },
      paginationShow: false, //分页是否显示
      invokeiIterface: false, //是否调用接
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns5,
      fileName: 'ProductDataList-5'
    }

    const getTable5Data = (data: any) => {
      pageData.cfList5 = data
    }
    const table6Ref = ref<any>(null)
    const tableColumns6 = [
      {
        headerName: '操作',
        field: 'del6',
        slotName: 'del6',
        width: 150,
        cellRenderer: {
          template: `
            <icon-delete v-if="record.productCode != ''"
                         style="font-size: 30px; cursor: pointer; color: red"
                         @click="callDelRow6(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callDelRow6 = (a: any) => {
              delRow6(a)
            }
            return {
              record,
              callDelRow6
            }
          }
        }
      },
      {
        headerName: '默认',
        field: 'startState',
        slotName: 'startState',
        width: 150,
        cellRenderer: {
          template: `
            <el-checkbox v-model="record.startState" :true-label="1"
                         :false-label="0" @change="callClickMoren(record)"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callClickMoren = (a: any) => {
              clickMoren(a)
            }
            return {
              record,
              callClickMoren
            }
          }
        }
      },
      {
        headerName: '成品编号(布号)',
        field: 'productCode',
        slotName: 'productCode',
        width: 150,
        cellRenderer: {
          template: `
            <a-select popup-container="html" class="bacClass" v-model="record.productCode"
                      @change="callChangeCf6(record)" @focus="callFocusSel6"
                      @search="callHandleSearch6" :loading="loading" :filter-option="false"
                      allow-search allow-clear>
              <a-option v-for="item in pageData.clothList6"
                        :value="item['clothCode']">{{ item['clothCode'] }}
              </a-option>
            </a-select>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callChangeCf6 = (a: any) => {
              changeCf6(a)
            }
            const callFocusSel6 = () => {
              focusSel6()
            }
            const callHandleSearch6 = (val: any) => {
              handleSearch6(val)
            }
            return {
              record,
              callChangeCf6,
              callFocusSel6,
              callHandleSearch6,
              pageData
            }
          }
        }
      },
      {
        headerName: '品名',
        field: 'productName',
        slotName: 'productName',
        width: 150,
        cellRenderer: {
          template: `
            <a-select popup-container="html" class="bacClass" v-model="record.productName"
                      @focus="callFocusSel6_1" @search="callHandleSearch6_1" :loading="loading"
                      :filter-option="false" allow-search allow-clear>
              <a-option v-for="item in pageData.clothList6_1"
                        :value="item['brandName']">{{ item['brandName'] }}
              </a-option>
            </a-select>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            const callFocusSel6_1 = (a: any) => {
              focusSel6_1()
            }
            const callHandleSearch6_1 = (val: any) => {
              handleSearch6_1(val)
            }
            return {
              record,
              callFocusSel6_1,
              callHandleSearch6_1,
              pageData
            }
          }
        }
      },
      {
        headerName: '生产工艺',
        field: 'productTechnology',
        slotName: 'productTechnology',
        width: 150,
        cellRenderer: {
          template: `
            <a-input v-model="record.productTechnology"/>
          `,
          setup(props: any) {
            const record = ref(props.params.data)
            return {
              record
            }
          }
        }
      },
    ]
    let configTable6 = {
      url: 'product/CommodityProduct/getList', //接口路径
      queryData: {
        //接口参数
      },
      paginationShow: false, //分页是否显示
      invokeiIterface: false, //是否调用接
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns6,
      fileName: 'ProductDataList-6'
    }

    const getTable6Data = (data: any) => {
      pageData.cfList6 = data
    }
    const dataForm = reactive<ProductDataList>({
      exFactory: '',
      picture: '',
      sourceDevelopment: '',
      partRemark: '',
      productDate: '',
      stateDescription: '',
      customFactory: '',
      packCarton: '',
      packTape: '',
      lossType: '',
      lossRate: '',
      clothType: '',
      id: null,
      saleState: null,
      purchaseState: '',
      commodityState: '',
      commodityCode: '',
      commodityName: '',
      nameEn: '',
      classType: '',
      brandName: '',
      merceryName: '',
      chinaPart: '',
      enPart: '',
      remarkPart: '',
      fabricType: '',
      colorType: '',
      productCraft: '',
      qualityStandard: '',
      merceryType: '',
      organization: '',
      saleType: '',
      productType: '',
      unitNo: '',
      accuracy: '',
      priceAccuracy: '',
      batchNo: '',
      quality: '',
      assertState: '',
      remark: '',
      obsoleteState: '',
      deleteState: '',
      createName: '',
      createTime: '',
      updateName: '',
      updateTime: '',
    })
    const total = ref(0)
    const dqy = ref(1)
    const size = ref(10)
    watch(() => pageData.showAdd, (newVal, oldVal) => {
      if (newVal) {
        nextTick(() => {
          if (drawerContentRef.value !== undefined && drawerHeaderRef.value !== undefined) {
            drawerTableHeight.value = drawerContentRef.value?.clientHeight - drawerHeaderRef.value?.clientHeight
          } else {
            drawerTableHeight.value = 150
          }
        })
      }
    })

    function PageSize(val: any) {
      dqy.value = val
      doRefresh()
    }

    function change1(val: any) {
      size.value = val
      doRefresh()
    }

    let gc = reactive([])
    const headerShow = ref<boolean>(true)
    let Checkbox1 = ref(false)
    let Checkbox2 = ref(false)
    let Checkbox3 = ref(false)
    const okSuccess = () => {
    }

    function doRefresh() {
      table1Ref.value.setQuery({
        deleteState: '0',
        commodityCode: pageData.commodityCode,
        commodityName: pageData.commodityName,
      })
    }

    function doRefresh6(val: any) {
      pageData.pageLoading = true
      post({
        url: '/product/CommodityOther/getList',
        data: {
          commodityId: val,
        },
      })
          .then(({data, code}: any) => {
            if (code === 200) {
              dataFormFushu.pushClothType = data[0].pushClothType
              dataFormFushu.byThePool = data[0].byThePool
              dataFormFushu.cylinder = data[0].cylinder
              dataFormFushu.greyCode = data[0].greyCode
              dataFormFushu.riskAlert = data[0].riskAlert
              dataFormFushu.applicableQuarter = data[0].applicableQuarter
              // pageData.cfList['spotGoodsSpec'] == 0 ? false : true
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
    }

    const {selectedRowKeys, onSelectionChange} = useRowSelection()
    const pagination = usePagination(doRefresh)
    const table = useTable()
    const rowKey = useRowKey('id')
    const gridOption = ref()
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
      colState.value = params.columnApi
    }


    const formRef = ref<FormInstance>()

    onMounted(() => {
      doRefresh()
      // 切换tap到本页面执行的方法
      emitter.on('ProductDataList', () => {
        doRefresh()
      })
    })
    //查询
    const selectHandler = () => {
      dqy.value = 1
      doRefresh()
    }
    const queryData = reactive({
      firm: '',
    })
    const addHandler = () => {
      getFirmGroup()
      pageData.isShow = true
      pageData.cfList = []
      pageData.cfList2 = []
      pageData.cfList3 = []
      pageData.cfList5 = []
      pageData.cfList6 = []
      for (var key in dataForm) {
        if (key == 'id') {
          dataForm[key] = null
        } else {
          dataForm[key] = ''
        }
      }
      pageData.showAdd = true
      pageData.sideTitle = '新增商品列表'
      const table2NewRow = tableColumns2.reduce((s: any, v: any) => {
        s[v.field] = ''
        return s
      }, {})
      nextTick(() => {
        table2Ref.value.setdataListIterface([table2NewRow])
      })
      pageData.cfList2.push(
          {projectName: '破洞', requestName: '', remark: ''},
          {projectName: '手感工艺', requestName: '', remark: ''},
          {projectName: '染整工艺', requestName: '', remark: ''},
          {projectName: '后工序工艺', requestName: '', remark: ''},
          {projectName: '对色类别', requestName: '', remark: ''},
          {projectName: '对色光源', requestName: '', remark: ''},
          {projectName: '旧单备注', requestName: '', remark: ''},
          {projectName: '', requestName: '', remark: ''}
      )
      nextTick(() => {
        table3Ref.value.setdataListIterface(pageData.cfList2)
      })
      pageData.cfList3.push(
          {projectName: '缩水要求(L)', requestName: '', remark: ''},
          {projectName: '缩水要求(W)', requestName: '', remark: ''},
          {projectName: '胶袋', requestName: '', remark: ''},
          {projectName: '除油', requestName: '', remark: ''},
          {projectName: '甲醛', requestName: '', remark: ''},
          {projectName: 'PH值', requestName: '', remark: ''},
          {projectName: '白晒牢度', requestName: '', remark: ''},
          {projectName: '汗渍牢度', requestName: '', remark: ''},
          {projectName: '干礸', requestName: '', remark: ''},
          {projectName: '洗水牢度', requestName: '', remark: ''},
          {projectName: '水渍牢度', requestName: '', remark: ''},
          {projectName: '爆破', requestName: '', remark: ''},
          {projectName: '显擦', requestName: '', remark: ''},
          {projectName: '抗起球', requestName: '', remark: ''},
          {projectName: '扭度', requestName: '', remark: ''},
          {projectName: '', requestName: '', remark: ''}
      )
      nextTick(() => {
        table4Ref.value.setdataListIterface(pageData.cfList3)
      })
      pageData.cfList5.push({
        startState: '',
        greyCode: '',
        greyAttribute: '',
        greyName: '',
        saleColorNo: '',
      })
      pageData.cfList6.push({
        startState: '',
        productCode: '',
        productName: '',
        productTechnology: '',
      })
    }
    //修改 record（本行数据）
    let picUrl = ref()
    const editHandler = (record: any) => {
      picUrl.value = baseURL + '/' + record.picture
      pageData.isShow2 = true
      pageData.isShow = false
      getFirmGroup()
      let obY = record.id
      doRefresh6(obY)
      if (pageData.cfList6['startState'] == 1) {
        pageData.cfList6['startState'] = true
      } else {
        pageData.cfList6['startState'] = false
      }
      if (pageData.cfList5['startState'] == 1) {
        pageData.cfList5['startState'] = true
      } else {
        pageData.cfList5['startState'] = false
      }
      dataForm.commodityCode = record.commodityCode
      dataForm.exFactory = record.exFactory
      dataForm.customFactory = record.customFactory
      dataForm.lossRate = record.lossRate
      dataForm.saleState = record.saleState
      dataForm.purchaseState = record.purchaseState
      dataForm.commodityState = record.commodityState
      dataForm.commodityName = record.commodityName
      dataForm.nameEn = record.nameEn
      dataForm.sourceDevelopment = record.sourceDevelopment
      dataForm.productType = record.productType
      dataForm.merceryName = record.merceryName
      dataForm.chinaPart = record.chinaPart
      dataForm.enPart = record.enPart
      dataForm.partRemark = record.partRemark
      dataForm.stateDescription = record.stateDescription
      dataForm.fabricType = record.fabricType
      dataForm.clothType = record.clothType
      dataForm.colorType = record.colorType
      dataForm.organization = record.organization
      dataForm.lossType = record.lossType
      dataForm.qualityStandard = record.qualityStandard
      dataForm.saleType = record.saleType
      dataForm.productDate = record.productDate
      dataForm.productCraft = record.productCraft
      dataForm.exFactory = record.exFactory
      //侧滑栏滑出滑入
      pageData.showAdd = true
      pageData.sideTitle = '修改商品列表'
      nextTick(() => {
        table2Ref.value.setQuery({
          commodityId: obY,
        })
        table3Ref.value.setQuery({
          commodityId: obY,
        })
        table4Ref.value.setQuery({
          commodityId: obY,
        })
        table5Ref.value.setQuery({
          commodityId: obY,
        })
        table6Ref.value.setQuery({
          commodityId: obY,
        })
      })

    }

    const sideOk = () => {
      formRef.value?.validate().then((err) => {
        if (!err) {
          formRef.value?.validate().then((err) => {
            if (!err) {
              if (pageData.sideTitle === '新增商品列表') {
                pageData.pageLoading = true
                if (pageData.file != '') {
                  let fd = new FormData()
                  fd.append('file', pageData.file)
                  axios
                      .post(baseURL + '/minio/file/upload', fd, {
                        headers: {
                          'Content-Type': 'multipart/form-data',
                          token: sessionStorage.getItem('USER-TOKEN-KEY'),
                        },
                      })
                      .then((res: any) => {
                        if (res.data.code === 200) {
                          dataForm.picture = res['data']['data']['data']
                        } else {
                          Message.error({
                            content: res.message,
                            duration: 5000,
                          })
                        }
                        if (pageData.cfList['spotGoodsSpec']) {
                          pageData.cfList['spotGoodsSpec'] = 1
                        } else {
                          pageData.cfList['spotGoodsSpec'] = 0
                        }
                        if (dataFormFushu['spotGoodsSpec']) {
                          dataFormFushu['spotGoodsSpec'] = 1
                        } else {
                          dataFormFushu['spotGoodsSpec'] = 0
                        }
                        if (pageData.cfList5['startState']) {
                          pageData.cfList5['startState'] = 1
                        } else {
                          pageData.cfList5['startState'] = 0
                        }
                        if (pageData.cfList6['startState']) {
                          pageData.cfList6['startState'] = 1
                        } else {
                          pageData.cfList6['startState'] = 0
                        }
                        post({
                          url: '/product/Commodity/insertList',
                          data: {
                            commodity: dataForm,
                            commoditySpec: pageData.cfList,
                            commodityRequest: pageData.cfList2,
                            commodityQualityStandard: pageData.cfList3,
                            commodityOther: [dataFormFushu],
                            commodityGrey: pageData.cfList5,
                            commodityProduct: pageData.cfList6,
                          },
                        })
                            .then((res: any) => {
                              if (res.code === 200) {
                                formRef.value?.resetFields()
                                pageData.showAdd = false
                                Message.success({
                                  content: '新增成功',
                                  duration: 5000,
                                })
                              } else {
                                Message.error({
                                  content: res.message,
                                  duration: 5000,
                                })
                              }
                              //doRefresh();
                            })
                            .finally(() => {
                              doRefresh()
                              pageData.pageLoading = false
                            })
                      })
                } else {
                  post({
                    url: '/product/Commodity/insertList',
                    data: {
                      commodity: dataForm,
                      commoditySpec: table2Ref.value.getListData(),
                      commodityRequest: table3Ref.value.getListData(),
                      commodityQualityStandard: pageData.cfList3,
                      commodityOther: [dataFormFushu],
                      commodityGrey: pageData.cfList5,
                      commodityProduct: pageData.cfList6,
                    },
                  })
                      .then((res: any) => {
                        if (res.code === 200) {
                          formRef.value?.resetFields()
                          pageData.showAdd = false
                          // console.log(dataForm.id, res.id, '12121212121212112');

                          Message.success({
                            content: '新增成功',
                            duration: 5000,
                          })
                        } else {
                          Message.error({
                            content: res.message,
                            duration: 5000,
                          })
                        }
                        //doRefresh();
                      })
                      .finally(() => {
                        doRefresh()
                        pageData.pageLoading = false
                      })
                }
              } else if (pageData.sideTitle === '修改商品列表') {
                pageData.pageLoading = true
                if (pageData.file != '') {
                  let fd = new FormData()
                  fd.append('file', pageData.file)
                  axios.post(baseURL + '/minio/file/upload', fd, {
                    headers: {
                      'Content-Type': 'multipart/form-data',
                      token: sessionStorage.getItem('USER-TOKEN-KEY'),
                    },
                  })
                      .then((res: any) => {
                        if (res.data.code === 200) {
                          dataForm.picture = res['data']['data']['data']
                        } else {
                          Message.error({
                            content: res.message,
                            duration: 5000,
                          })
                        }
                        let ids: any = table1Ref.value.getSelectedRows().map((item: any) => {
                          return item.id
                        })
                        dataFormFushu.commpdityId = ids[0]
                        dataForm.id = ids[0]
                        // pageData.cfList.push(commpdityId : ids)
                        pageData.cfList.map((item: any) => {
                          return {...item, commpdityId: ids[0]}
                        })
                        pageData.cfList2.map((item: any) => {
                          return {...item, commpdityId: ids[0]}
                        })
                        pageData.cfList3.map((item: any) => {
                          return {...item, commpdityId: ids[0]}
                        })
                        pageData.cfList5.map((item: any) => {
                          return {...item, commpdityId: ids[0]}
                        })
                        pageData.cfList6.map((item: any) => {
                          return {...item, commpdityId: ids[0]}
                        })
                        post({
                          url: '/product/Commodity/updateList',
                          data: {
                            commodity: dataForm,
                            commoditySpec: pageData.cfList,
                            commodityRequest: pageData.cfList2,
                            commodityQualityStandard: pageData.cfList3,
                            commodityOther: [dataFormFushu],
                            commodityGrey: pageData.cfList5,
                            commodityProduct: pageData.cfList6,
                          },
                        })
                            .then((res: any) => {
                              if (res.code === 200) {
                                formRef.value?.resetFields()
                                pageData.showAdd = false
                                Message.success({
                                  content: '修改成功',
                                  duration: 5000,
                                })
                              } else {
                                Message.error({
                                  content: res.message,
                                  duration: 5000,
                                })
                              }
                              //doRefresh();
                            })
                            .finally(() => {
                              doRefresh()
                              pageData.pageLoading = false
                            })
                      })
                } else {
                  let ids: any = table1Ref.value.getSelectedRows().map((item: any) => {
                    return item.id
                  })
                  dataFormFushu.commpdityId = ids[0]
                  dataForm.id = ids[0]
                  // pageData.cfList.push(commpdityId : ids)
                  pageData.cfList.map((item: any) => {
                    return {...item, commpdityId: ids[0]}
                  })
                  pageData.cfList2.map((item: any) => {
                    return {...item, commpdityId: ids[0]}
                  })
                  pageData.cfList3.map((item: any) => {
                    return {...item, commpdityId: ids[0]}
                  })
                  pageData.cfList5.map((item: any) => {
                    return {...item, commpdityId: ids[0]}
                  })
                  pageData.cfList6.map((item: any) => {
                    return {...item, commpdityId: ids[0]}
                  })
                  if (pageData.cfList['spotGoodsSpec'] == 0) {
                    pageData.cfList['spotGoodsSpec'] = ''
                  }
                  post({
                    url: '/product/Commodity/updateList',
                    data: {
                      commodity: dataForm,
                      commoditySpec: pageData.cfList,
                      commodityRequest: pageData.cfList2,
                      commodityQualityStandard: pageData.cfList3,
                      commodityOther: [dataFormFushu],
                      commodityGrey: pageData.cfList5,
                      commodityProduct: pageData.cfList6,
                    },
                  })
                      .then((res: any) => {
                        if (res.code === 200) {
                          formRef.value?.resetFields()
                          pageData.showAdd = false
                          Message.success({
                            content: '修改成功',
                            duration: 5000,
                          })
                        } else {
                          Message.error({
                            content: res.message,
                            duration: 5000,
                          })
                        }
                        //doRefresh();
                      })
                      .finally(() => {
                        doRefresh()
                        pageData.pageLoading = false
                      })
                }
              }
            }
          })
        }
      })
    }
    const deleteHandler = () => {
      if (table1Ref.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
      }
      Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        draggable: true,
        onOk() {
          pageData.pageLoading = true
          post({
            url: 'product/Commodity/delete',
            // data: selectedRowKeys.value
            data: table1Ref.value.getSelectedRows().map((item: any) => {
              return item.id
            }),
          })
              .then(({code, data}: any) => {
                if (code === 200) {
                  Message.success({
                    content: '删除成功',
                    duration: 5000,
                  })
                  pagination.page = 1
                  selectedRowKeys.value = []
                  doRefresh()
                } else {
                  Message.error({
                    content: '删除失败',
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
        },
      })
    }
    //工厂 /编号/单位下拉框改变事件
    const changeFirm = () => {
      post({
        url: 'pdProductUnit/getList',
        data: {
          firm: queryData.firm,
        },
      })
          .then(({data, code}: any) => {
            if (code === 200) {
              table.handleSuccess(data.list)
              pagination.setTotalSize(data.total)
            }
          })
          .catch(console.log)
    }
    const foucus3 = () => {
      getProductUnitDrop(null)
    }
    //下拉数据  单位
    const options3 = ref<any>(pageData.ProductUnitDrop)
    const loading3 = ref(false)
    const handleSearch3 = (value: any) => {
      if (value) {
        loading3.value = true
        getProductUnitDrop(value)
        options3.value = pageData.ProductUnitDrop
        loading3.value = false
      } else {
        options3.value = []
      }
    }
    //查询单位下拉框
    const getProductUnitDrop = (val: any) => {
      post({
        url: 'dict/dictTypeDetail/getListByMap',
        data: {
          codeType: 17,
          detailName: val,
        },
      })
          .then(({data, code}: any) => {
            if (code === 200) {
              pageData.ProductUnitDrop = data
            }
          })
          .catch(console.log)
    }
    const handleChange = (_data: any) => {
      table.handleSuccess(_data)
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      flex: 1,
    }
    //单选框 改变
    const changeDx = (val: any, num: any) => {
      if (num == 1) {
        Checkbox1.value = true
      } else {
        Checkbox2.value = false
        Checkbox3.value = false
      }
      if (num == 2) {
        Checkbox2.value = true
      } else {
        Checkbox1.value = false
        Checkbox3.value = false
      }
      if (num == 3) {
        Checkbox3.value = true
      } else {
        Checkbox1.value = false
        Checkbox2.value = false
      }
    }
    const localeText1: any = ref(localeText)
    let isIDss: any = ref(1)

    const changeTabs1 = (val: any) => {
      isIDss.value = val
      if (isIDss.value == 1) {
        pageData.dutymachineState = 0
        // doRefresh()
      } else {
        pageData.dutymachineState = 1
        // doRefresh1()
      }
    }
    const dataFormFushu = reactive<{
      greyCode: any
      riskAlert: any
      applicableQuarter: any
      commpdityId: any
      pushClothType: any
      byThePool: any
      cylinder: any
    }>({
      pushClothType: null,
      byThePool: null,
      cylinder: null,
      commpdityId: null,
      greyCode: '',
      riskAlert: '',
      applicableQuarter: '',
    })
    //成份删除
    const delRow = (record: any) => {
      if (table2Ref.value.getSelectedRows().length !== 1) {
        pageData.cfList = pageData.cfList.filter(function (o: any) {
          return o['firstWashSealDegree'] !== record['firstWashSealDegree']
        })
        const newData = table2Ref.value.getListData().filter((item: any) => {
          return item['firstWashSealDegree'] !== record['firstWashSealDegree']
        })
        table2Ref.value.setdataListIterface(newData)
      } else {
        Message.warning('最后一条数据，不可删除！')
      }
    }
    //判断是否有重复
    const changeCf = (record: any) => {
      let count1 = 0
      let count2 = 0
      record.firstWashSealDegreeUnit = ''
      for (let index = 0; index < table2Ref.value.getListData().length; index++) {
        const element = table2Ref.value.getListData()[index]
        if (element['firstWashSealDegree'] == record['firstWashSealDegree']) {
          count1++
        }
        if (element['firstWashSealDegree'] == '') {
          count2++
        }
        if (count1 > 1) {
          Message.warning('此成份已被选择过，请重新选择！')
          record['firstWashSealDegree'] = ''
          return
        }
      }
      //选择完成份给用户再新增一行
      if (count2 == 0) {
        const addNewRow = tableColumns2.reduce((s: any, v: any) => {
          s[v.field] = ''
          return s
        }, {})
        table2Ref.value.setdataListIterface([...table2Ref.value.getListData(), addNewRow])
      }
    }
    //要求删除
    const delRow2 = (record: any) => {
      if (pageData.cfList2.length !== 1) {
        pageData.cfList2 = pageData.cfList2.filter(function (o: any) {
          return o['projectName'] !== record['projectName']
        })
        table3Ref.value.setdataListIterface(pageData.cfList2)
      } else {
        Message.warning('最后一条数据，不可删除！')
      }
    }
    const changeCf2 = (record: any) => {
      let count1 = 0
      let count2 = 0
      // record.ratio = '';
      for (let index = 0; index < table3Ref.value.getListData().length; index++) {
        const element = table3Ref.value.getListData()[index]
        if (element['projectName'] == record['projectName']) {
          count1++
        }
        if (element['projectName'] == '') {
          count2++
        }
        if (count1 > 1) {
          Message.warning('此成份已被选择过，请重新选择！')
          record['projectName'] = ''
          return
        }
      }
      //选择完成份给用户再新增一行
      if (count2 == 0) {
        const addNewRow = tableColumns3.reduce((s: any, v: any) => {
          s[v.field] = ''
          return s
        }, {})
        table3Ref.value.setdataListIterface([...table3Ref.value.getListData(), addNewRow])
        // pageData.cfList2.push({projectName: '', requestName: '', remark: ''})
      }
    }
    //质量标准删除
    const delRow3 = (record: any) => {
      if (pageData.cfList3.length !== 1) {
        pageData.cfList3 = pageData.cfList3.filter(function (o: any) {
          return o['projectName'] !== record['projectName']
        })
        table4Ref.value.setdataListIterface(pageData.cfList3)
      } else {
        Message.warning('最后一条数据，不可删除！')
      }
    }
    const changeCf3 = (record: any) => {
      let count1 = 0
      let count2 = 0
      // record.ratio = '';
      for (let index = 0; index < pageData.cfList3.length; index++) {
        const element = pageData.cfList3[index]
        if (element['projectName'] == record['projectName']) {
          count1++
        }
        if (element['projectName'] == '') {
          count2++
        }
        if (count1 > 1) {
          Message.warning('此成份已被选择过，请重新选择！')
          record['projectName'] = ''
          return
        }
      }
      //选择完成份给用户再新增一行
      if (count2 == 0) {
        pageData.cfList3.push({projectName: '', requestName: '', remark: ''})
      }
    }
    //下拉框得到焦点
    const focusSel = () => {
      selCxAll({greyCode: '', auditState: 1})
    }
    //下拉数据
    const options = ref<any>(pageData.clothList)
    const loading = ref(false)
    const handleSearch = (value: any) => {
      if (value) {
        const ob = {greyCode: value, auditState: 1}
        loading.value = true
        selCxAll(ob)
        options.value = pageData.clothList
        loading.value = false
      } else {
        options.value = []
      }
    }

    //下拉框查询
    function selCxAll(val: any) {
      post({
        url: '/product/pdGreyInformation/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //下拉框得到焦点
    const focusSel1 = () => {
      selCxAll1({"codeType": 2})
    }
    //下拉数据
    const options1 = ref<any>(pageData.clothList1)
    const loading1 = ref(false)
    const handleSearch1 = (value: any) => {
      if (value) {
        const ob = {codeType: value}
        loading1.value = true
        selCxAll1(ob)
        options1.value = pageData.clothList1
        loading1.value = false
      } else {
        options1.value = []
      }
    }

    //下拉框查询
    function selCxAll1(val: any) {
      post({
        url: '/dict/dictTypeDetail/getList',
        data: {"codeType": 2},
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList1 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //关联坯布删除
    const delRow5 = (record: any) => {
      if (pageData.cfList5.length !== 1) {
        pageData.cfList5 = pageData.cfList5.filter(function (o: any) {
          return o['greyCode'] !== record['greyCode']
        })
        table5Ref.value.setdataListIterface(pageData.cfList5)
      } else {
        Message.warning('最后一条数据，不可删除！')
      }
    }
    const changeCf5 = (record: any) => {
      let count1 = 0
      let count2 = 0
      // record.greyCode = '';
      for (let index = 0; index < table5Ref.value.getListData().length; index++) {
        const element = table5Ref.value.getListData()[index]
        if (element['greyCode'] == record['greyCode']) {
          count1++
        }
        if (element['greyCode'] == '') {
          count2++
        }
        if (count1 > 1) {
          Message.warning('此成份已被选择过，请重新选择！')
          record['greyCode'] = ''
          return
        }
      }
      //选择完成份给用户再新增一行
      if (count2 == 0) {
        const addNewRow = tableColumns5.reduce((s: any, v: any) => {
          s[v.field] = ''
          return s
        }, {})
        nextTick(() => {
          table5Ref.value.setdataListIterface([...table5Ref.value.getListData(), addNewRow])
        })
      }
    }

    //下拉框得到焦点
    const focusSel5 = () => {
      selCxAll5({greyCode: ''})
    }
    //下拉数据
    const options5 = ref<any>(pageData.clothList5)
    const loading5 = ref(false)
    const handleSearch5 = (value: any) => {
      if (value) {
        const ob = {greyCode: value}
        loading5.value = true
        selCxAll5(ob)
        options5.value = pageData.clothList5
        loading5.value = false
      } else {
        options5.value = []
      }
    }

    //下拉框查询
    function selCxAll5(val: any) {
      post({
        url: '/product/pdGreyInformation/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList5 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //下拉框得到焦点
    const focusSel5_1 = () => {
      selCxAll5_1({grayFabricName: ''})
    }
    //下拉数据
    const options5_1 = ref<any>(pageData.clothList5_1)
    const loading5_1 = ref(false)
    const handleSearch5_1 = (value: any) => {
      if (value) {
        const ob = {grayFabricName: value}
        loading5_1.value = true
        selCxAll5_1(ob)
        options5_1.value = pageData.clothList5_1
        loading5_1.value = false
      } else {
        options5_1.value = []
      }
    }

    //下拉框查询
    function selCxAll5_1(val: any) {
      post({
        url: '/product/pdGreyInformation/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList5_1 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //关联成品删除
    const delRow6 = (record: any) => {
      if (pageData.cfList6.length !== 1) {
        pageData.cfList6 = pageData.cfList6.filter(function (o: any) {
          return o['productCode'] !== record['productCode']
        })
        table6Ref.value.setdataListIterface(pageData.cfList6)
      } else {
        Message.warning('最后一条数据，不可删除！')
      }
    }
    const changeCf6 = (record: any) => {
      let count1 = 0
      let count2 = 0
      // record.ratio = '';
      for (let index = 0; index < table6Ref.value.getListData().length; index++) {
        const element = table6Ref.value.getListData()[index]
        if (element['productCode'] == record['productCode']) {
          count1++
        }
        if (element['productCode'] == '') {
          count2++
        }
        if (count1 > 1) {
          Message.warning('此成份已被选择过，请重新选择！')
          record['productCode'] = ''
          return
        }
      }
      //选择完成份给用户再新增一行
      if (count2 == 0) {
        const addNewRow = tableColumns6.reduce((s: any, v: any) => {
          s[v.field] = ''
          return s
        }, {})
        nextTick(() => {
          table6Ref.value.setdataListIterface([...table6Ref.value.getListData(), addNewRow])
        })
      }
    }

    //下拉框得到焦点
    const focusSel6 = () => {
      selCxAll6({clothCode: ''})
    }
    //下拉数据
    const options6 = ref<any>(pageData.clothList6)
    const loading6 = ref(false)
    const handleSearch6 = (value: any) => {
      if (value) {
        const ob = {clothCode: value}
        loading6.value = true
        selCxAll6(ob)
        options6.value = pageData.clothList6
        loading6.value = false
      } else {
        options6.value = []
      }
    }

    //下拉框查询
    function selCxAll6(val: any) {
      post({
        url: '/pdm/DevFabricInfo/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList6 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //下拉框得到焦点
    const focusSel6_1 = () => {
      selCxAll6_1({brandName: ''})
    }
    //下拉数据
    const options6_1 = ref<any>(pageData.clothList6_1)
    const loading6_1 = ref(false)
    const handleSearch6_1 = (value: any) => {
      if (value) {
        const ob = {brandName: value}
        loading6_1.value = true
        selCxAll6_1(ob)
        options6_1.value = pageData.clothList6_1
        loading6_1.value = false
      } else {
        options6_1.value = []
      }
    }

    //下拉框查询
    function selCxAll6_1(val: any) {
      post({
        url: '/product/Brand/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList6_1 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    const pagingList1: any = ref(pagingList)

    //来源开发下拉框得到焦点
    const focusSelQ = () => {
      selCxAllQ({brandName: ''})
    }
    const optionsQ = ref<any>(pageData.nameList)
    const loadingQ = ref(false)
    const handleSearchQ = (value: any) => {
      if (value) {
        const ob = {brandName: value}
        loadingQ.value = true
        selCxAllQ(ob)
        optionsQ.value = pageData.nameList
        loadingQ.value = false
      } else {
        optionsQ.value = []
      }
    }

    function selCxAllQ(val: any) {
      post({
        url: '/product/Brand/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //产品类别下拉框得到焦点
    const focusSelQ1 = () => {
      selCxAllQ1({productTypeName: ''})
    }
    const optionsQ1 = ref<any>(pageData.nameList1)
    const loadingQ1 = ref(false)
    const handleSearchQ1 = (value: any) => {
      if (value) {
        const ob = {productTypeName: value}
        loadingQ1.value = true
        selCxAllQ1(ob)
        optionsQ1.value = pageData.nameList1
        loadingQ1.value = false
      } else {
        optionsQ12.value = []
      }
    }

    function selCxAllQ1(val: any) {
      post({
        url: '/product/productType/getList',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList1 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //布料名称下拉框得到焦点
    const focusSelQ2 = () => {
      selCxAllQ2({grayFabricName: ''})
    }
    const optionsQ2 = ref<any>(pageData.nameList2)
    const loadingQ2 = ref(false)
    const handleSearchQ2 = (value: any) => {
      if (value) {
        const ob = {grayFabricName: value}
        loadingQ2.value = true
        selCxAllQ2(ob)
        optionsQ2.value = pageData.nameList2
        loadingQ2.value = false
      } else {
        optionsQ2.value = []
      }
    }

    function selCxAllQ2(val: any) {
      post({
        url: '/product/pdGreyInformation/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList2 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    function changeQ2(val: any) {
      post({
        url: '/product/pdGreyInformation/selectpdGreyInformation',
        data: {id: val},
      }).then(({data, code}: any) => {
        if (code === 200) {
          // pageData.nameList2 = data;
          dataForm.chinaPart = data[0]['ingredient']
          dataForm.enPart = data[0]['englishIngredient']
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //面料类型下拉框得到焦点
    const focusSelQ3 = () => {
      selCxAllQ3({fabricCategory: '', deleteState: 0})
    }
    const optionsQ3 = ref<any>(pageData.nameList3)
    const loadingQ3 = ref(false)
    const handleSearchQ3 = (value: any) => {
      if (value) {
        const ob = {fabricCategory: value, deleteState: 0}
        loadingQ3.value = true
        selCxAllQ3(ob)
        optionsQ3.value = pageData.nameList3
        loadingQ3.value = false
      } else {
        optionsQ3.value = []
      }
    }

    function selCxAllQ3(val: any) {
      post({
        url: '/pdm/fabricType/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList3 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //布类下拉框得到焦点
    const focusSelQ4 = () => {
      selCxAllQ4({fabrics: ''})
    }
    const optionsQ4 = ref<any>(pageData.nameList4)
    const loadingQ4 = ref(false)
    const handleSearchQ4 = (value: any) => {
      if (value) {
        const ob = {fabrics: value}
        loadingQ4.value = true
        selCxAllQ4(ob)
        optionsQ4.value = pageData.nameList4
        loadingQ4.value = false
      } else {
        optionsQ4.value = []
      }
    }

    function selCxAllQ4(val: any) {
      post({
        url: '/qms/GreyVerify/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList4 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //染色类型下拉框得到焦点
    const focusSelQ5 = () => {
      selCxAllQ5({jobType: ''})
    }
    const optionsQ5 = ref<any>(pageData.nameList5)
    const loadingQ5 = ref(false)
    const handleSearchQ5 = (value: any) => {
      if (value) {
        const ob = {jobType: value}
        loadingQ5.value = true
        selCxAllQ5(ob)
        optionsQ5.value = pageData.nameList5
        loadingQ5.value = false
      } else {
        optionsQ5.value = []
      }
    }

    function selCxAllQ5(val: any) {
      post({
        url: '/pdm/JobType/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList5 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //组织下拉框得到焦点
    const focusSelQ6 = () => {
      selCxAllQ6({greyInformationName: ''})
    }
    const optionsQ6 = ref<any>(pageData.nameList6)
    const loadingQ6 = ref(false)
    const handleSearchQ6 = (value: any) => {
      if (value) {
        const ob = {greyInformationName: value}
        loadingQ6.value = true
        selCxAllQ6(ob)
        optionsQ6.value = pageData.nameList6
        loadingQ6.value = false
      } else {
        optionsQ6.value = []
      }
    }

    function selCxAllQ6(val: any) {
      post({
        url: '/product/greyInformationData/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList6 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //质量标准下拉框得到焦点
    const focusSelQ7 = () => {
      selCxAllQ7({verifyStandard: ''})
    }
    const optionsQ7 = ref<any>(pageData.nameList7)
    const loadingQ7 = ref(false)
    const handleSearchQ7 = (value: any) => {
      if (value) {
        const ob = {verifyStandard: value}
        loadingQ7.value = true
        selCxAllQ2(ob)
        optionsQ7.value = pageData.nameList7
        loadingQ7.value = false
      } else {
        optionsQ7.value = []
      }
    }

    function selCxAllQ7(val: any) {
      post({
        url: '/pdm/VerifyStandardProject/getFieldValue',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList7 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //销售类型下拉框得到焦点
    const focusSelQ8 = () => {
      selCxAllQ8({"codeType": 31})
    }
    const optionsQ8 = ref<any>(pageData.nameList8)
    const loadingQ8 = ref(false)
    const handleSearchQ8 = (value: any) => {
      if (value) {
        const ob = {codeType: value}
        loadingQ8.value = true
        selCxAllQ8(ob)
        optionsQ8.value = pageData.nameList8
        loadingQ8.value = false
      } else {
        optionsQ8.value = []
      }
    }

    function selCxAllQ8(val: any) {
      post({
        url: '/dict/dictTypeDetail/getList',
        data: {"codeType": 31}
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList8 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //状态说明下拉框得到焦点
    const focusSelQ9 = () => {
      selCxAllQ9({detailName: ''})
    }
    const optionsQ9 = ref<any>(pageData.nameList9)
    const loadingQ9 = ref(false)
    const handleSearchQ9 = (value: any) => {
      if (value) {
        const ob = {detailName: value}
        loadingQ9.value = true
        selCxAllQ9(ob)
        optionsQ9.value = pageData.nameList9
        loadingQ9.value = false
      } else {
        optionsQ9.value = []
      }
    }

    function selCxAllQ9(val: any) {
      post({
        url: '/dict/dictTypeDetail/getList',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList9 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //出厂单位下拉框得到焦点
    const focusSelQ10 = () => {
      selCxAllQ10({brandName: ''})
    }
    const optionsQ10 = ref<any>(pageData.nameList10)
    const loadingQ10 = ref(false)
    const handleSearchQ10 = (value: any) => {
      if (value) {
        const ob = {brandName: value}
        loadingQ10.value = true
        selCxAllQ10(ob)
        optionsQ10.value = pageData.nameList10
        loadingQ10.value = false
      } else {
        optionsQ10.value = []
      }
    }

    function selCxAllQ10(val: any) {
      post({
        url: '/org/baCompany/getTreeCompanyByUser',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList10 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //货主单位下拉框得到焦点
    const focusSelQ11 = () => {
      selCxAllQ11({brandName: ''})
    }
    const optionsQ11 = ref<any>(pageData.nameList11)
    const loadingQ11 = ref(false)
    const handleSearchQ11 = (value: any) => {
      if (value) {
        const ob = {brandName: value}
        loadingQ11.value = true
        selCxAllQ11(ob)
        optionsQ11.value = pageData.nameList11
        loadingQ11.value = false
      } else {
        optionsQ11.value = []
      }
    }

    function selCxAllQ11(val: any) {
      post({
        url: '/org/baCompany/getTreeCompanyByUser',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList11 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //包装纸筒下拉框得到焦点
    const focusSelQ12 = () => {
      selCxAllQ12({codeType: ''})
    }
    const optionsQ12 = ref<any>(pageData.nameList12)
    const loadingQ12 = ref(false)
    const handleSearchQ12 = (value: any) => {
      if (value) {
        const ob = {codeType: value}
        loadingQ12.value = true
        selCxAllQ12(ob)
        optionsQ12.value = pageData.nameList12
        loadingQ12.value = false
      } else {
        optionsQ12.value = []
      }
    }

    function selCxAllQ12(val: any) {
      post({
        url: '/dict/dictTypeDetail/getList',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList12 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //包装胶带下拉框得到焦点
    const focusSelQ13 = () => {
      selCxAllQ13({codeType: ''})
    }
    const optionsQ13 = ref<any>(pageData.nameList13)
    const loadingQ13 = ref(false)
    const handleSearchQ13 = (value: any) => {
      if (value) {
        const ob = {codeType: value}
        loadingQ13.value = true
        selCxAllQ13(ob)
        optionsQ13.value = pageData.nameList13
        loadingQ13.value = false
      } else {
        optionsQ13.value = []
      }
    }

    function selCxAllQ13(val: any) {
      post({
        url: '/dict/dictTypeDetail/getList',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList13 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //耗损类型下拉框得到焦点
    const focusSelQ14 = () => {
      selCxAllQ14({})
    }
    const optionsQ14 = ref<any>(pageData.nameList14)
    const loadingQ14 = ref(false)
    const handleSearchQ14 = (value: any) => {
      if (value) {
        const ob = {materialsAttritionCategory: value}
        loadingQ14.value = true
        selCxAllQ(ob)
        optionsQ14.value = pageData.nameList14
        loadingQ14.value = false
      } else {
        optionsQ14.value = []
      }
    }

    function selCxAllQ14(val: any) {
      post({
        url: '/product/RawmaterialLoss/getList',
        data: val,
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.nameList14 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    function changeQ14(val: any) {
      //materialsAttritionCategory  名称
      // materialsAttritionRate
      var ob = pageData.nameList14.filter(function (o: any) {
        return o.materialsAttritionCategory == val
      })[0]

      dataForm.lossRate = ob['materialsAttritionRate']
    }

    const getFirmGroup = () => {
      post({
        url: 'org/baCompany/getTreeCompanyByUser',
        data: {},
      }).then(({code, data}) => {
        if (code === 200) {
          pageData.nameList10 = data
          pageData.nameList11 = data
        }
      })
    }
    let casOb = ref()
    //公司改变
    const cascaderChange = (event: any, val: any) => {
      // dataForm.department = null
      //拿到选中的这个节点数组
      setTimeout(function () {
        console.log(casOb.value)

        console.log(casOb.value.selectViewValue)
        if (casOb.value.selectViewValue.length != 0) {
          pageData.title = slicing(casOb.value.selectViewValue[0]['label'])
          dataForm.stateDescription = slicing(casOb.value.selectViewValue[0]['label'])
        }
      }, 100)

      // getBmGroup(val)
    }
    const casOb2 = ref()
    //公司改变
    const cascaderChange2 = (event: any, val: any) => {
      // dataForm.department = null
      //拿到选中的这个节点数组
      setTimeout(function () {
        // console.log(casOb2.value.selectViewValue)
        if (casOb2.value.selectViewValue.length != 0) {
          pageData.title2 = slicing(casOb2.value.selectViewValue[0]['label'])
          dataForm.customFactory = slicing(casOb2.value.selectViewValue[0]['label'])
        }
      }, 100)

      // getBmGroup1(val)
    }

    //文件上传
    function customUpload1(info: any) {
      info.onSuccess('')
      pageData.file = info.fileItem.file
      return info
    }

    const picClick = () => {
      pageData.isShow2 = false
      pageData.isShow = true
    }
    const huiche = () => {
      doRefresh()
    }
    // 默认值勾选事件
    const clickMoren = (res: any) => {
      if (res.productCode == '') {
        Message.error({
          content: '无法选择空值作为默认值！',
          duration: 5000,
        })
        res.startState = 0
        return
      } else {
        pageData.cfList6.map(function (o: any) {
          if (o.productCode != res.productCode) {
            o.startState = 0
          }
        })
      }
    }
    // 启用数据勾选事件
    const clickGuanlian = (res: any) => {
      if (res.greyCode == '') {
        Message.error({
          content: '无法启用空值！',
          duration: 5000,
        })
        res.startState = 0
        return
      }
    }
    return {
      drawerTableHeight,
      drawerContentRef,
      drawerHeaderRef,
      colState,
      permissionStore,
      clickMoren,
      clickGuanlian,
      huiche,
      picUrl,
      picClick,
      customUpload1,
      getFirmGroup,
      cascaderChange2,
      cascaderChange,
      changeQ2,
      changeQ14,
      handleSearchQ12,
      focusSelQ12,
      handleSearchQ14,
      focusSelQ14,
      handleSearchQ13,
      focusSelQ13,
      handleSearchQ11,
      focusSelQ11,
      handleSearchQ10,
      focusSelQ10,
      handleSearchQ9,
      focusSelQ9,
      handleSearchQ8,
      focusSelQ8,
      handleSearchQ7,
      focusSelQ7,
      handleSearchQ6,
      focusSelQ6,
      handleSearchQ5,
      focusSelQ5,
      handleSearchQ4,
      focusSelQ4,
      handleSearchQ3,
      focusSelQ3,
      handleSearchQ2,
      focusSelQ2,
      handleSearchQ1,
      focusSelQ1,
      handleSearchQ,
      focusSelQ,
      dataFormFushu,
      pagingList1,
      handleSearch,
      focusSel,
      handleSearch1,
      focusSel1,
      handleSearch5,
      focusSel5,
      handleSearch5_1,
      focusSel5_1,
      handleSearch6,
      focusSel6,
      handleSearch6_1,
      focusSel6_1,
      changeCf2,
      changeCf,
      changeCf3,
      changeCf5,
      changeCf6,
      delRow,
      delRow2,
      delRow3,
      delRow5,
      delRow6,
      changeTabs1,
      headerShow,
      isIDss,
      localeText1,
      changeDx,
      defaultColDef,
      total,
      PageSize,
      change1,
      dqy,
      size,
      deleteHandler,
      sideOk,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      pagination,
      tableColumns,
      table,
      rowKey,
      pageData,
      queryData,
      changeFirm,
      editHandler,
      okSuccess,
      Checkbox1,
      Checkbox2,
      Checkbox3,
      gc,
      selectHandler,
      foucus3,
      handleSearch3,
      getProductUnitDrop,
      handleChange,
      gridReady,
      loading,
      table1Ref,
      configTable1,
      table2Ref,
      configTable2,
      getTable2Data,
      table3Ref,
      configTable3,
      getTable3Data,
      table4Ref,
      configTable4,
      getTable4Data,
      table5Ref,
      configTable5,
      getTable5Data,
      table6Ref,
      configTable6,
      getTable6Data,
    }
  },
  components: {Toolbar, },
}
</script>
<style scoped lang="less">
.toolbar-item {
  cursor: pointer;
}

.toolBarRig {
  margin-left: 80%;
}

:deep(.arco-collapse-item-active > .arco-collapse-item-header) {
  background: #00a8ea !important;
}
</style>